<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ include file="/WEB-INF/jsp/common/taglib.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>customer_Add</title>
<script src="<c:url value="/ui/jquery-1.10.2.js" />"></script>
<script src="<c:url value="/ui/jquery-migrate-1.2.1.js" />"></script>

<link rel="stylesheet" href="<c:url value="/demo/jquery.ui.all.css"/>">
<link href="<s:url value="/css/standard.css" />" rel="stylesheet"
	type="text/css" />
<link href="<s:url value="/css/pop_up.css" />" rel="stylesheet"
	type="text/css" />
<link href="<s:url value="/css/maintenance.css" />" rel="stylesheet"
	type="text/css" />
<link href="<s:url value="/css/Simplemodal.css" />" rel="stylesheet"
	type="text/css" />

<script src='<c:url value="/js/jquery.DynamicMessage.js" />'></script>
<script src='<c:url value="/js/jquery.simplemodal-1.4.1.js" />'></script>

<script src='<c:url value="/js/common.js" />'></script>
<script src='<c:url value="/js/common_ui.js" />'></script>
<script src='<c:url value="/js/poplayer.js" />'></script>
<script src='<c:url value="/js/maint_ui.js" />'></script>
<script src='<c:url value="/js/jquery.form.js" />'></script>

<script src="<c:url value="/ui/jquery.ui.core.js" />"></script>
<script src="<c:url value="/ui/jquery.ui.widget.js" />"></script>
<script src="<c:url value="/ui/jquery.ui.datepicker.js" />"></script>
<!--  <script src="<c:url value="/ui/jquery-ui-timepicker-addon.js" />"></script>-->

<script src="<c:url value="/ui/jquery-ui-slide.min.js" />"></script>
<link rel="stylesheet" href="<c:url value="/demo/demos.css" />">
<link rel="stylesheet" href="<c:url value="/demo/dateTime.css" />">


</head>
<body>
	<form:form name="addForm" method="post">

		<table  width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr height="20px"></tr>
			<tr>
				<td width="7" align="left" valign="top" height="7"><img
					src="<s:url value="/images/corner_left_top_m.gif"/>" width="7"
					height="7" /></td>
				<td class="topBorderMain"><img
					src="<s:url value="/images/spacer.gif" />" /></td>
				<td width="7" align="right" valign="top"><img
					src="<s:url value="/images/corner_right_top_m.gif" />" /></td>
			</tr>

			<tr>
				<th colspan="4" class="mainFormTitle">客户信息_新增</th>

			</tr>
			<tr>
				<td colspan="4" class="leftRightBorderMain">
					<table id="radiotable" class="mainGrid" width="100%" border="0"
						cellpadding="0" cellspacing="0">
						<thead>
							<tr>

								<th width="17%">公司名称</th>
								<th width="17%">电话</th>
								<th width="17%">地址</th>
								<th width="17%">传真</th>
								<th width="17%">等级</th>
								<th width="17%">区域</th>

							</tr>
						</thead>
						<tbody>
							<tr id="radiotable_tr">
								<td align='center' style="word-break: break-all;"><input
									name="name" value="${customer.name }"></td>

								<td align='center' style="word-break: break-all;"><input
									name="tel" value="${customer.tel }"></td>

								<td align='center' style="word-break: break-all;"><input
									name="address" value="${customer.address }"></td>

								<td align='center' style="word-break: break-all;"><input
									name="fax" value="${customer.fax }"></td>

								<td align='center' style="word-break: break-all;"><select
									name='level'>
										<option value="first" selected="selected">first</option>
										<option value="second">second</option>
										<option value="third">third</option>

								</select></td>

								<td align='center' style="word-break: break-all;"><select
									name='district'>
										<option value="South China" selected="selected">South
											China</option>
										<option value="North China">North China</option>
										<option value="West China">West China</option>
										<option value="East China">East China</option>
								</select></td>

							</tr>


						</tbody>
					</table>
				</td>
			</tr>
			<tr>
				<th colspan="4" class="mainFormbtn" style="height: 15px"></th>

			</tr>
			<tr>
				<td align="left" valign="bottom" height="7" width="7"><img
					src="<s:url value="/images/corner_left_bottom_m.gif"/>" /></td>
				<td class="bottomBorderMain"><img
					src="<s:url value="/images/spacer.gif"/>" /></td>
				<td align="right" valign="bottom" height="7" width="7"><img
					src="<s:url value="/images/corner_right_bottom_m.gif"/>" /></td>
			</tr>

			<tr height="40px"></tr>
			<tr>
				<td width="7" align="left" valign="top" height="7"><img
					src="<s:url value="/images/corner_left_top_m.gif"/>" width="7"
					height="7" /></td>
				<td class="topBorderMain"><img
					src="<s:url value="/images/spacer.gif" />" /></td>
				<td width="7" align="right" valign="top"><img
					src="<s:url value="/images/corner_right_top_m.gif" />" /></td>
			</tr>
			<tr>

				<th colspan="4" class="mainFormTitle">联系人信息_新增</th>

			</tr>
			<tr>
				<td colspan="5" class="leftRightBorderMain"
					style="border-top-color: black;">
					<table id="radiotable_1" class="mainGrid" width="100%" border="0"
						cellpadding="0" cellspacing="0">
						<thead>
							<tr>
								<th width="50px">姓名</th>
								<th width="50px">地址</th>
								<th width="50px">职务</th>
								<th width="50px">电话</th>
								<th width="50px">邮箱</th>
								<th width="180px" >编辑 &nbsp <img src="<s:url value="/images/btn_add.gif"/>"
								name="btn_add.gif" align="absbottom" /><a href="javascript:doadd()"
									style="font-size: 15px; text-decoration: none; ">添加</a></th>
							</tr>
						</thead>
						<c:forEach items="${list}" var="contact" varStatus="i">
							<tr id="radiotable_tr_${i.index}">

								<td align='center' style="word-break: break-all;"><input
									name="contacts[${i.index }].name" value="${contact.name}"></td>

								<td align='center' style="word-break: break-all;"><input
									name="contacts[${i.index }].address" value="${contact.address}"></td>

								<td align='center' style="word-break: break-all;"><input
									name="contacts[${i.index }].duty" value="${contact.duty}"></td>

								<td align='center' style="word-break: break-all;"><input
									name="contacts[${i.index }].tel" value="${contact.tel}"></td>

								<td align='center' style="word-break: break-all;"><input
									name="contacts[${i.index }].mail" value="${contact.mail}"></td>

								<td align='center' style="word-break: break-all;"><input
									type="button"
									onclick="deleteContact('radiotable_tr_${i.index}')"
									value=" delete " class="button"></td>
							</tr>
						</c:forEach>

					</table> <input type="hidden" value="${fn:length(list)-1}" id="length">
				</td>
			</tr>
			<tr>
				<th colspan="4" class="mainFormbtn" style="height: 30px">
					<table cellpadding="0" cellspacing="0" width="100%">
						<tr>
							<td align="center" style="height: 30px">
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td align="center" style="height: 30px"><div
												class="pageColumn">
												<table width="100%">
													<td align="center"><input type="submit"
														value=" Submit " class="button" onclick="doSubmit()" /><input
														type="button" value=" Back " class="button"
														name="blGo2242" onclick="toBack();" /></td>

												</table>



											</div></td>
									</tr>
								</table>
							</td>
						</tr>
					</table>


				</th>

			</tr>
			<tr>
				<td align="left" valign="bottom" height="7" width="7"><img
					src="<s:url value="/images/corner_left_bottom_m.gif"/>" /></td>
				<td class="bottomBorderMain"><img
					src="<s:url value="/images/spacer.gif"/>" /></td>
				<td align="right" valign="bottom" height="7" width="7"><img
					src="<s:url value="/images/corner_right_bottom_m.gif"/>" /></td>
			</tr>
		</table>
	</form:form>
	<script type="text/javascript">
		function doSubmit() {
			addForm.action = "<c:url value='/customer/add'/>";
			addForm.submit();
		}
		function toBack() {
			self.location = "<c:url value='/customer/page'/>"
		}

		function doadd() {
			var newlength = Number($("#length").val()) + 1;
			$("#length").val(newlength);

			var text1 = $("<tr></tr>").attr("id", "radiotable_tr_" + newlength);

			var text2 = $("<td align='center' style='word-break: break-all;' ></td>");
			var text3 = $("<input >").attr({
				"name" : "contacts[" + newlength + "].name",
				"class" : newlength
			});

			var text4 = $("<td align='center' style='word-break: break-all;' ></td>");
			var text5 = $("<input >").attr({
				"name" : "contacts[" + newlength + "].address",
				"class" : newlength
			});

			var text6 = $("<td align='center' style='word-break: break-all;' ></td>");
			var text7 = $("<input >").attr({
				"name" : "contacts[" + newlength + "].duty",
				"class" : newlength
			});

			var text8 = $("<td align='center' style='word-break: break-all;' ></td>");
			var text9 = $("<input >").attr({
				"name" : "contacts[" + newlength + "].tel",
				"class" : newlength
			});

			var text10 = $("<td align='center' style='word-break: break-all;' ></td>");
			var text11 = $("<input >").attr({
				"name" : "contacts[" + newlength + "].mail",
				"class" : newlength
			});

			var text12 = $("<td align='center' style='word-break: break-all;' ></td>");
			var text13 = $("<input >").attr(
					{
						"type" : "button",
						"onclick" : "deleteContact( 'radiotable_tr_"
								+ newlength + "')",
						"value" : " delete ",
						"class" : "button"
					});

			text2.append(text3);
			text4.append(text5);
			text6.append(text7);
			text8.append(text9);
			text10.append(text11);
			text12.append(text13);

			text1.append(text2, text4, text6, text8, text10, text12);

			$("#radiotable_1").append(text1);

		}

		function deleteContact(id) {

			$("#" + id).remove();
		}
	</script>
</body>
</html>